<template>
  <div class="app-container" v-loading="loading">
    <!-- 费用信息 -->
    <carInformationExpense ref="carInformationExpense" v-model="form" state='write' />
    <!-- 申请信息 -->
    <cationInformationFK ref="cationInformationFK" v-model="form" state='write' />
    <div style="text-align: right;box-sizing: border-box;padding-right: 20px;margin-top: 20px; background-color: #fff;width: 100%;height: 60px;line-height: 60px;border-radius: 8px;">
      <el-button @click="back">返回</el-button>
      <el-button type="primary" @click="submit">提交</el-button>
    </div>
  </div>
</template>

<script>
import carInformationExpense from "./components/carInformationExpense"
import cationInformationFK from "./components/cationInformationFK"
import { applyForPaymentInfo, applyForPaymentSubmit } from "@/api/pickUpTheCar";
export default {
  // 申请付款
  name: 'ApplyForPayment',
  components: {
    carInformationExpense,
    cationInformationFK
  },
  data() {
    return {
      loading: false,
      form: {}
    };
  },
  created() {
    this.applyForPaymentInfo()
  },
  methods: {
    async applyForPaymentInfo() {
      this.loading = true
      try {
        let result = await applyForPaymentInfo(this.$route.query.id);
        if (result) {
          this.loading = false
          this.form = result.data
        }
      } catch (error) {
        this.loading = false
      }
    },
    async submit() {
      let result = await this.valid();
      if (result) {
        const loading = this.$loading({
          lock: true,
          text: "提交中",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)",
        });
        let data = {
          ...this.form,
          totalFee: this.$refs.carInformationExpense.totalPrice,
          numberOfVehicles: this.form.carList.length
        }
        applyForPaymentSubmit(data).then(res => {
          if (res) {
            loading.close();
            this.$message.success("提交成功");
            this.back()
          }
        }).catch(() => {
          loading.close();
        });
      } else {
        this.error();
      }
    },
    back() {
      this.$tab.closeOpenPage(this.$route);
      this.$router.go(-1)
    },
    error() {
      this.$nextTick(() => {
        const el = document.querySelectorAll(".el-form-item__error")[0];
        el.scrollIntoView({ block: "center", behavior: "smooth" });
      });
    },
    valid() {
      return new Promise(async (resolve) => {
        let result = true;
        let refs = Object.values(this.$refs);
        for (let index = 0; index < refs?.length; index++) {
          const ref = refs[index];
          if (Object.prototype.toString.call(ref) == "[object Array]") {
            for (let i = 0; i < ref.length; i++) {
              const element = ref[i];
              if (element?.valid) {
                let rc = await element?.valid?.();
                result = result && rc;
              }
              if (element?.validate) {
                let rf = await this._valid(ref);
                result = result && rf;
              }
              if (element?.form_validate) {
                let rf = await this._valid(ref, "form_validate");
                result = result && rf;
              }
            }
          } else {
            if (ref?.valid) {
              let rc = await ref?.valid?.();
              result = result && rc;
            }
            if (ref?.validate) {
              let rf = await this._valid(ref);
              result = result && rf;
            }
            if (ref?.form_validate) {
              let rf = await this._valid(ref, "form_validate");
              result = result && rf;
            }
          }
        }
        resolve(result);
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.app-container {
  overflow: auto !important;
}
</style>
